<template>
	<div>
		<el-dialog :title="dialog.title" center show-close :before-close="handleClose" :visible.sync="dialog.visible" width="500px">
			<el-form ref="form" label-width="70px" :inline="true" :rules="rules"
				:model="form">
				<el-form-item prop="roleName" label="角色名称">
					<el-input v-model="form.roleName"  placeholder="请输入角色名称"></el-input>
				</el-form-item>
				<el-form-item  prop="description" label="角色描述">
					<el-input v-model="form.description" placeholder="请输入角色描述"></el-input>
				</el-form-item>
				<div v-if="dialog.isAdd" class="dia_footer">
					<el-form-item>
						<el-button type="primary" @click="resetInput">重置</el-button>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="addRoleBtu('form')">添加</el-button>
					</el-form-item>
				</div>
				<div v-else class="dia_footer">
					<el-form-item>
						<el-button type="primary"  @click="resetInput">重置</el-button>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="updateRoleBtu('form')">修改</el-button>
					</el-form-item>
				</div>
			</el-form>
		</el-dialog>
		<div class="h_h">
			<el-button class="btu_head" type="primary" icon="el-icon-plus" @click="addDialog">增加</el-button>
			<el-button class="btu_head" type="primary" icon="el-icon-delete" @click="delRoleBut">删除</el-button>
			<el-input class="search_input" placeholder="请输入内容" prefix-icon="el-icon-search" v-model="like"></el-input>
			<el-button class="btu_head" type="primary" icon="el-icon-search" @click="search(like)">搜索</el-button>
		</div>
		<div>
			<vxe-table :data="tableData" @checkbox-change="selectChangeEvent" :checkbox-config="{labelField: 'id', highlight: true}">
				<vxe-column type="checkbox"  title="id" width="280" ></vxe-column>
				<vxe-column field="roleName" title="角色名称"></vxe-column>
				<vxe-column field="description" title="描述"></vxe-column>
				<vxe-column title="操作" width="100" show-overflow>
					<template #default="{ row }">
						<el-button type="primary" icon="vxe-icon-edit" @click="editEvent(row)">修改 </el-button>
					</template>
				</vxe-column>
			</vxe-table>
			<el-pagination 
				layout="total, sizes, prev, pager, next, jumper" 
				:current-page="getRoleListQuery.pageNo"
				:page-size="pagination.pageSize" 
				:total="pagination.total"
				:page-sizes="[10,15,20]"
				@current-change="handleCurrentChange"
				@size-change="handleSizeChange">	
			</el-pagination>
		</div>
		
	</div>
</template>

<script>
	import {getRoleList,addRole,delRole,updateRole,updateByRoleId} from "../../../plugins/server.js"
	export default {
		data() {
			return {
				form: {
					roleName:"",
					description:""
				},
				like:"",
				rules:{
					roleName:[{
						required: true,
						trigger: 'blur',
						message: "不可为空"
					}],
					description:[{
						required: true,
						trigger: 'blur',
						message: "不可为空"
					}]
				},
				dialog:{},
				tableData:[],
				pagination:{},
				selectIdList:[],
				getRoleListQuery:{
					pageNo:1,
					pageSize:"10",
					sortBy:"",
					isAsc:"",
					roleName:""
				},
			}
		},
		methods: {
			//更新表数据
			getTableData(){
				getRoleList(this.getRoleListQuery).then(res=>{
					this.tableData=res.data.data.list;
					this.pagination={
						total:res.data.data.total,
						pages:res.data.data.pages
					}
				})
			},
			handleCurrentChange(val){
				//更改页数
				this.getRoleListQuery.pageNo=val;
				this.getTableData();
			},
			handleSizeChange(val){
				this.getRoleListQuery.pageSize=val;
				this.getTableData();
			},
			addDialog(){
				this.dialog={
					title:"添加角色",
					visible:true,
					isAdd:true
				}
			},
			addRoleBtu(form){
				this.$refs[form].validate((valid) =>{
					if(valid){
						//add
						let currentTime = new Date();
						this.form.updateTime=currentTime
						addRole(this.form).then(res=>{
							if(res.data.data){
								this.dialog.visible=false;
								this.$message({
									message:res.data.message,
									type:'success'
								})
								this.getTableData();
							}else{
								this.$message({
									message:res.data.message,
									type:'error'
								})
							}
						})
					}
				})
			},
			updateRole(val) {
				console.log(val)
			},	
			resetInput(){
				this.form={
					roleName:"",
					description:""
				}
			},
			selectChangeEvent({$table}){
				const records = $table.getCheckboxRecords()
				let selectIdList=[]
				for(let item of records ){
					selectIdList.push(item.id)
				}
				this.selectIdList=selectIdList;
			},
			delRoleBut(){
				if(this.selectIdList.includes(0)){
					this.$message({
					    message: "0不可删除已经为您剔除",
					    type: 'warning'
					 });
					 this.selectIdList=this.selectIdList.filter(item=>item!==0)
				}
				if(this.selectIdList.length()>0){
					delRole(this.selectIdList).then(res=>{
						if(res.data.data){
							//把userRole表里的roleId为以上的的全部改为0
							updateByRoleId(this.selectIdList)
							this.$message({
							    message: res.data.message,
							    type: 'success'
							 });
							 this.getTableData()
						}else{
							this.$message({
							    message: res.data.message,
							    type: "warning"
							 })
						}
					})
				}
				
			},
			search(like) {
				let data=this.getRoleListQuery;
				data.roleName=like;
				getRoleList(data).then(res=>{
					this.tableData=res.data.data.list;
					this.pagination={
						total:res.data.data.total,
						pages:res.data.data.pages
					}
				})
			},
			handleClose(done) {
				this.$confirm('确认关闭？')
					.then(_ => {
						done();
					})
					.catch(_ => {});
			},
			editEvent(row){
				this.form={
					id:row.id,
					roleName:row.roleName,
					description:row.description
				}
				this.dialog={
					title:"修改角色",
					visible:true,
					isAdd:false
				}
			},
			updateRoleBtu(form){
				this.$refs[form].validate((valid) =>{
					if(valid){
						//add
						let currentTime = new Date();
						this.form.updateTime=currentTime
						updateRole(this.form).then(res=>{
							if(res.data.data){
								this.dialog.visible=false;
								this.$message({
									message:res.data.message,
									type:'success'
								})
								this.getTableData();
							}else{
								this.$message({
									message:res.data.message,
									type:'error'
								})
							}
						})
					}
				})
			}
		
		},
		components: {},
		created() {
			this.getTableData()
		}
	}
</script>

<style >
	.search_input{
		margin: 0px 10px ;
		width: 300px;
	}
	label{
		width: 80px !important;
	}
	.h_h{
		display: flex;
		margin-bottom: 10px;
	}
	.el-form-item{
		margin-left: 40px;
	}
	.el-input{
		width: 300px;
	}
	.dia_footer{
		display: flex;
		width: 450px;
		justify-content: space-around;
	}
	.dia_footer>.el-form-item{
		margin: 0;
	}

	
</style>